<template>
	<view style="background-color: #F5F5F5;">
		
		
		
<!-- 		<view class="position-relative border"
		style="height: 400rpx;">
			<no-thing icon="no_pay.png" msg="您还没有待付款订单"></no-thing>
		</view> -->
		
		<!-- 选项卡 -->
		<view class="d-flex bg-white a-center j-center font-md text-muted border-top border-bottom border-light-secondary">
			<view class="flex-1 d-flex a-center j-center py-2"
			v-for="(item, index) in tabBars" :key="index"
			:class="tabIndex === index ? 'tabactive' : ''"
			@tap="changeTab(index)">
				{{item.name}}
			</view>
		</view>
		
		<!-- 订单列表 -->
		<block v-for="(tab, tabI) in tabBars" :key="tabI">
			<view class="position-relative" v-show="tabI === tabIndex">
				<template v-if="!tab.list || tab.list.length < 1">
					<view class="position-relative border"
					style="height: 400rpx;">
						<no-thing :icon="getNoThingByStatusCode(tab.statusCode).no_thing" :msg="getNoThingByStatusCode(tab.statusCode).msg"></no-thing>
					</view>
				</template>
				<template v-else>
					<!-- 订单列表 -->
					<block v-for="(item, index) in tab.list" :key="index">
						<order-list :item="item" :index="index"></order-list>
					</block>
				</template>
				
				
			</view>
		</block>
		
		
		<!-- 推荐标题 -->
		<view class="text-center main-text-color font-lg font-weight mt-5">
			<text>为你推荐</text>
		</view>
		<view class="position-relative d-flex a-center j-center text-secondary mb-3 pt-2">
			<view style="background-color: #F5F5F5;z-index: 2;" class="px-2 position-absolute">买的人还买了</view>
			<view class="position-absolute " 
			style="height: 1upx; left: 0;right: 0;background-color: #DDDDDD;"></view>
		</view>
		<!-- 为你推荐 -->
		<view class="row j-sb bg-white">
			<common-list v-for="(item, index) in hotList" :key="index"
			:item="item" :index="index">
			</common-list>
		</view>
	</view>
</template>

<script>
	import commonList from "@/components/common/common-list.vue"
	import noThing from "@/components/common/no-thing.vue"
	import orderList from "@/components/order/order-list.vue"
	
	let statusNoThingMap = {
		"all": {
			no_thing: "no_pay.png",
			"msg": "你还没有相关订单"
		},
		"prepay": {
			no_thing: "no_pay.png",
			"msg": "你还没有待付款订单"
		},
		"prereceive": {
			no_thing: "no_pay.png",
			"msg": "你还没有待收货订单"
		},
		"preComment": {
			no_thing: "no_pay.png",
			"msg": "你还没有待评价订单"
		}
	}
	
	export default {
		components: {
			commonList,
			noThing,
			orderList,
		},
		data() {
			return {
				
				tabIndex: 0,
				tabBars: [
					{name: "全部", id:0, no_thing:"no_pay.png",
						statusCode: "all",
						list: [
							{
								createTime: "2020-10-01 10:00:00",
								status: "已发货",
								statusCode: "delivered",
								order_items: [
									{
										cover: "/static/images/demo/cate_01.png",
										title: "小米10",
										pprice: "2999",
										attrs: "金色 标配",
										num:1
									}
								],
								total_num: 3,
								total_price: 299
							},
							{
								createTime: "2020-10-02 10:00:00",
								status: "待付款",
								statusCode: "prepay",
								order_items: [
									{
										cover: "/static/images/demo/cate_02.png",
										title: "小米8",
										pprice: "4200",
										attrs: "红色 标配",
										num:3
									}
								],
								total_num: 1,
								total_price: 4200
							}
						],
					},
					{name: "待付款", id:1, no_thing:"no_pay.png",
						statusCode: "prepay",
						list:[]
					},
					{name: "待收货", id:2, no_thing:"no_pay.png",
						statusCode: "prereceive",
						list:[]
					},
					{name: "待评价", id:3, no_thing:"no_pay.png",
						statusCode: "preComment",
						list:[]
					},
				],
				hotList: [
					{
						cover: "/static/images/demo/22.png",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					},
					{
						cover: "/static/images/demo/list/1.jpg",
						title: "米家空调",
						desc: "1.5匹变频",
						oprice: "1399",
						mprice: "2699"
					}
				],
			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index
			},
			
			getNoThingByStatusCode(statusCode) {
				if (statusCode in statusNoThingMap) {
					return statusNoThingMap[statusCode]
				}
			}
		}
	}
</script>

<style>
.tabactive {
	border-bottom: 5rpx solid #FD6801;
	color: #FD6801;
	/* margin-bottom: -5rpx; */
}
</style>
